<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mydemo</title>
	<style type="text/css">
		body,input,div {margin:0;padding:0;}
		div {width:300px;margin:10px auto;padding:30px;background:black;text-align:center;}
		input {outline:none;width:35px;height:20px;border:2px solid grey;margin:0 10px;line-height:20px;text-align:center;}
		div span {color:white;}
	</style>
	<script type="text/javascript">
		window.onload = function() {		
			var oInput = document.getElementsByTagName("input");
			var myDate = new Date();
			/*此处仿照页面刷新，最好不要这么用*/
			setInterval(onload,1000);
			time();
			function time() {
				oInput[0].value = myDate.getHours();
				oInput[1].value = myDate.getMinutes();
				myDate.getSeconds() < 10 ? (oInput[2].value="0"+myDate.getSeconds()) : oInput[2].value = myDate.getSeconds();
			}
		}

		window.onload = function() {		
			var oInput = document.getElementsByTagName("input");
			/*time函数功能，获取当前时间和时间存储，故，需要将new Date()放在函数里面*/
			setInterval(time,1000);
			time();
			function time() {
				var myDate = new Date();
				oInput[0].value = myDate.getHours();
				oInput[1].value = myDate.getMinutes();
				myDate.getSeconds() < 10 ? (oInput[2].value="0"+myDate.getSeconds()) : oInput[2].value = myDate.getSeconds();
			}
		}
	</script>
</head>
<body>
	<div>
		<input type="text" maxlength="2" readonly="readonly"><span>点</span>
		<input type="text" maxlength="2" readonly="readonly"><span>分</span>
		<input type="text" maxlength="2" readonly="readonly"><span>秒</span>
	</div>
</body>
</html>